<template>
  <!-- 产品管理 子页面 -->
  <div class="app">
    <div class="box">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="产品名称">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="radio" :label="1">上架</el-radio>
          <el-radio v-model="radio" :label="2">未上架</el-radio>
        </el-form-item>
        <el-form-item label="产品分类">
          <el-cascader
            size="mideum"
            :options="cascaderData"
            :props="{ checkStrictly: true }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="产品分组">
          <el-select
            style="width: 250px"
            size="mideum"
            v-model="form.region"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in GroupingData"
              :key="index"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input
            size="mideum"
            style="width: 370px"
            v-model="form.name"
            placeholder="产品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品卖点">
          <el-input
            type="textarea"
            style="width: 370px"
            v-model="form.name"
            placeholder="产品卖点"
          ></el-input>
        </el-form-item>
        <el-form-item label="配送方式">
          <el-checkbox v-model="checked">商家配送</el-checkbox>
          <el-checkbox>用户自提</el-checkbox>
        </el-form-item>
        <el-form-item label="商品规格">
          <el-button @click="AddStandardData">添加规格</el-button>
        </el-form-item>
        <div class="spec" v-if="StandarFlag == true">
          <el-form-item label="规格名">
            <el-select
              style="width: 250px"
              size="mideum"
              v-model="form.qwe"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in StandardData"
                :key="index"
                :label="item.propName"
                :value="item.propId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规格名">
            <el-select
              style="width: 250px"
              size="mideum"
              v-model="form.rty"
              placeholder="请选择"
            >
              <el-option
                @click="text"
                v-for="(item, index) in StandardData"
                :key="index"
                :label="item.propName"
                :value="item.propId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" style="margin-left: 80px">确认</el-button>
          <el-button>取消</el-button>
        </div>
      </el-form>
      <el-table :data="tableData" style="width: 96%" border>
        <el-table-column prop="value1" label="销售价" width="160">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.value1"
              placeholder="请输入内容"
              type="number"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="value2" label="市场价" width="160">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.value2"
              placeholder="请输入内容"
              type="number"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="value3" label="库存" width="160">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.value3"
              placeholder="请输入内容"
              type="number"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="value4" label="商品重量(kg)" width="210">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.value4"
              placeholder="请输入内容"
              type="number"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="value5" label="商品体积(m³)" width="210">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.value5"
              placeholder="请输入内容"
              type="number"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="210">
          <el-button type="text">禁用</el-button>
        </el-table-column>
      </el-table>
      <div class="tinymce-editor">
        <editor
              api-key="k1q94wz8y6gen4xwo41qo0llopujpxe0heo8a9ceya6s16uc"
              v-model="myValue"
              :disabled="disabled"
              :init="{
                plugins: 'lists link image paste help wordcount',
                toolbar:
                  'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist',
              }"
            />
      </div>
      <el-button type="primary">确认</el-button>
    </div>
  </div>
</template>

<script>
import Editor from "@tinymce/tinymce-vue";
import {
  FreightList,
  StandardList,
  ClassifyList,
  GroupingList,
} from "@/api/wlgd";
export default {
  components: {
    Editor,
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    baseUrl: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default: "lists image media table wordcount",
    },
    toolbar: {
      type: [String, Array],
      default:
        "undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat",
    },
  },
  data() {
    return {
      myValue: this.value,
      radio: 1, //单选框
      checked: true, //复选框
      form: {
        //表单
      },
      FreightData: [], //运费数据
      StandardData: [], //规格值数据
      ClassifyData: [], //产品分类
      GroupingData: [], //产品分组
      StandarFlag: false, //控制规格显示隐藏
      tableData: [
        {
          value1: 0.01,
          value2: 0.01,
          value3: 0,
          value4: 0.0,
          value5: 0.0,
        },
      ], //商品规格表格
    };
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    },
  },
  computed: {
    //通过计算属性自动响应数据变化
    cascaderData() {
      if (!this.ClassifyData.length) return [];

      let rawTree = this.buildTree(this.ClassifyData);
      return this.convertToCascaderFormat(rawTree);
    },
  },
  mounted() {
    // tinymce.init({});
  },
  created() {
    this.FreightList(); //运费数据
    this.StandardList(); // 规格值数据
    this.ClassifyList(); //产品分类
    this.GroupingList(); // 产品分组
  },
  methods: {
    //测试
    convertToCascaderFormat(nodes) {
      return nodes.map((node) => ({
        value: node.categoryId,
        label: node.categoryName,
        // 递归处理子节点
        children:
          node.children && node.children.length
            ? this.convertToCascaderFormat(node.children)
            : undefined, // Element UI 会自动忽略 undefined
      }));
    },
    //测试
    buildTree(data) {
      let map = new Map();
      let tree = [];
      // 先创建所有节点
      data.forEach((item) => {
        map.set(item.categoryId, {
          ...item,
          children: [],
        });
      });
      // 第二次遍历建立父子关系
      data.forEach((item) => {
        let node = map.get(item.categoryId);
        if (item.parentId !== 0) {
          let parent = map.get(item.parentId);
          if (parent) {
            parent.children.push(node);
          } else {
            // 如果没有父级暂时给他放在根节点
            tree.push(node);
          }
        } else {
          tree.push(node);
        }
      });

      return tree;
    },
    // 控制规格显示隐藏 / 添加规格按钮
    AddStandardData() {
      this.StandarFlag = !this.StandarFlag;
    },
    //产品分组
    GroupingList() {
      GroupingList({}).then((res) => {
        this.GroupingData = res.data;
        console.log(this.GroupingData, "产品分组");
      });
    },
    //产品分类
    ClassifyList() {
      ClassifyList({}).then((res) => {
        this.ClassifyData = res.data;
        console.log(this.ClassifyData, "产品分类");
      });
    },
    //规格值
    StandardList() {
      StandardList({}).then((res) => {
        this.StandardData = res.data;
        console.log(this.StandardData, "规格值");
      });
    },
    //运费数据
    FreightList() {
      FreightList({}).then((res) => {
        this.FreightData = res.data;
        console.log(this.FreightData, "运费数据");
      });
    },
    //图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      let isJPG = file.type === "image/jpeg";
      let isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    clear() {
      this.myValue = "";
    },
  },
};
</script>

<style scoped lang='scss'>
.app {
  padding: 20px;
  background-color: #f1f4f5;
  .box {
    padding: 20px;
    background-color: #fff;
  }
}
// 上传图片样式开始
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border-radius: 8px;
  border: 1px dashed #ccc;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
// 上传图片样式结束
</style>